<template>
  <div>
      <div class="top">
          <img :src="billboard.pic_s192" alt="">
      </div>
      <ul class="bottom">
          <li v-for="(item,index) in songList" :key="index">
              <div >{{item.album_title}}</div>
              <div >{{item.artist_name}}</div>
          </li>
      </ul>
  </div>
</template>

<script>
import {getBillList} from "@/api/baidu-music"
export default {

data(){
return {
     billboard:{},
     songList:[]
}
},
created(){
getBillList(this.$route.params.id,6).then(res=>{
    console.log(res.data);
    this.billboard = res.data.billboard;
    this.songList = res.data.song_list
})
}
}
</script>

<style lang='less' scoped>
.top{
     width:100%;
        height:250px;

    img{
    width: 100%;
        max-height: 100%;
    }
}
.bottom{
padding:0px 10px;
li{
    padding: 10px 0px;
    border-bottom: 1px solid #ccc;
    div:nth-of-type(1){
        
            font-size: 20px;
        
    }
       div:nth-of-type(2){
        color: #ccc;
            font-size: 14px;
        
    }
}
}
</style>